<template>
  <div class="outside">
    <div class="loading" v-loading="isLoading" v-if="isLoading" element-loading-text="玩命加载ING。。。。"></div>
    <!-- element-loading-spinner="el-icon-loading" -->
    <div class="no-hotel" v-if="hotelList.length == 0 && isLoading == false">暂无对应的酒店信息</div>
    <el-row class="hotelList" v-for="hotel in hotelList" :key="hotel.id">
      <div class="hotelListWrap" @click="jumpToDetails(hotel.id)">
        <!-- 酒店图片 -->
        <el-col :span="8">
          <div class="img">
            <a href="#" @click.prevent>
              <img :src="hotel.photos" alt />
            </a>
          </div>
        </el-col>
        <!-- 酒店信息 -->
        <el-col class="hotel-middle" :span="10">
          <h2>
            <a href="#" @click.prevent>{{hotel.name}}</a>
          </h2>
          <p>{{hotel.alias}}</p>
          <el-row>
            <el-col :span="10">
              <!-- 等级星星 -->
              <el-rate
                v-model="hotel.stars"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              ></el-rate>
            </el-col>
            <el-col :span="7">
              <div class="grade">
                <span>{{hotel.all_remarks}}</span> 条评价
              </div>
            </el-col>
            <el-col :span="7">
              <div class="comments">
                <span>{{hotel.good_remarks}}</span> 篇游记
              </div>
            </el-col>
          </el-row>
          <div class="hotel-level" v-if="hotel.hotellevel">
            <i
              class="iconfont icon-huangguan"
              v-for="(star,index) in hotel.hotellevel.level"
              :key="index"
            ></i>
            {{hotel.hotellevel.name}}级酒店
          </div>
          <div class="hotel-type">
            <i class="iconfont icon-jiudiancanting-" v-if="hotel.hoteltype.name"></i>
            {{hotel.hoteltype.name}}
          </div>
          <div class="hotel-address">
            <i class="iconfont icon-jiudiancanting-1"></i>
            {{hotel.address}}
          </div>
        </el-col>

        <!-- 其他购票网址 -->
        <el-col :span="6">
          <div
            class="hotels"
            @click.stop.prevent="jumpToBook"
            v-for="(web,index) in hotel.products"
            :key="index"
          >
            <span class="name">{{web.name}}</span>
            <span class="hotel-price">
              ￥
              <b>{{web.price}}</b>起
              <i class="el-icon-arrow-right"></i>
            </span>
          </div>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
import img from "@/assets/images/bjs.jpg";
export default {
  props: ["hotelList"],
  data() {
    return {
      list: [],
      isLoading: true,
      timerId: null,
    };
  },
  watch: {
    hotelList: {
      handler(val) {
        console.log("hoteList子组件");
        console.log(val);
        if (val) {
          this.isLoading = false;
          clearInterval(this.timerId);
        } else {
          this.isLoading = true;
        }
      },
      deep: true,
    },
  },
  mounted() {
    this.timerId = setInterval(() => {
      this.loading = true;
    }, 1000);
  },
  methods: {
    // 跳转携程
    jumpToBook() {
      window.open("https://hotels.ctrip.com/hotel/694679.html");
    },
    // 跳转酒店详情页
    jumpToDetails(id) {
      console.log("触发点击事件：" + id);
      this.$router.push("/hotel/hotelDetails?id=" + id);
    },
  },
};
</script>

<style scoped lang='less'>
.loading {
  width: 1000px;
  height: 200px;
}
/deep/ .el-loading-spinner .el-loading-text {
  font-size: 20px;
}
.hotelList {
  cursor: pointer;
  margin: 48px 0;
  border-bottom: 1px solid #eee;
  .hotel-middle {
    padding-left: 15px;
  }

  .img {
    img {
      width: 320px;
      height: 210px;
    }
  }
  .hotel-address {
    margin: 10px 0;
    i {
      font-weight: 800;
      font-size: 18px;
    }
  }
  .hotel-type {
    margin: 10px 0;
    i {
      font-weight: 800;
      font-size: 18px;
    }
  }
  .hotel-level {
    margin-top: 5px;
    i {
      margin-right: 5px;
      color: orange;
    }
  }
  .grade {
    span {
      color: orangered;
    }
  }
  .comments {
    span {
      color: orangered;
    }
  }
  .hotels {
    cursor: pointer;
    display: flex;
    margin-bottom: 5px;
    height: 55px;
    align-items: center;
    border-bottom: 1px solid #ebeef5;
    transition: all 0.3s ease-out;
    &:hover {
      background: #f5f7fa;
    }
    .name {
      display: block;
      flex: 1;
    }
    .hotel-price {
      display: block;
      flex: 1;
      color: orangered;
    }
  }
}
.no-hotel {
  width: 1000px;
  height: 128px;
  line-height: 128px;
  text-align: center;
  font-size: 22px;
}
</style>